<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>User</title>
  <style>
  table {
  width: 700px;
  border-collapse: collapse;
}
table tr th, table tr td{
  height: 35px;
  border-bottom: solid 1px #999;
  text-align: center;
}
  </style>

</head>
<body>
<div id="app">
  <table>
    <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>操作</th>
    </tr>

    <tr v-for="user in userArr" :Key="user.userId">
      <td>{{user.userId}}</td>
      <td>{{user.userName}}</td>
      <td>{{user.userAge}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
    <tr>
      <td colspan="4"><button @click="clear">清空</button></td>
    </tr>
  </table>
  <h3>添加</h3>
  姓名：<input type="text" v-model="userName" aria-label=""><br>
  年龄：<input type="number" v-model="userAge" aria-label=""><br>
  <button @click="add">添加</button>
</div>
<script src="./vue.global.js"></script>
<script>
  Vue.createApp({
    el:'#app',
    data(){
      return{
      userArr:[
        {
          userId:1 ,
          userName:'张三',
          userAge:18
        },{
          userId:2 ,
          userName:'李四',
          userAge:20
        },{
          userId:3 ,
          userName:'王五',
          userAge:21
        }
        ],
       userName:'',
       userAge:0
      }
    },
    methods:{
      add(){
        let userId=0;
        if(this.userArr.length==0){
          userId=1
        }else {
          userId = this.arr[this.userArr.length-1].userId+1;
        }
       let user = {
          userId:this.userArr[this.userArr.length-1].userId+1,
          userName:this.userName,
          userAge:this.userAge
       }
        this.userArr.push(user);
      },
      del(index){
        this.userArr.splice(index,1);
      },
      clear(){
        this.userArr.splice(0,this.userArr.length)
      }
    }

  }).mount('#app');

</script>
</body>
</html>
